<template>
	<view class="content">
		<view class="mainContent">
			<view class="header">
				<view class="back" v-show="source === 'self'" @click="back">
					返回
				</view>
				<view class="back"  v-show="source !== 'self'"></view>
				<view class="logo">
					<image :src="'/static/images/yinlian.png'" class="logoImg"></image>
					<text class="logoText">银联快捷支付</text>
				</view>
				<view class="unbundle" v-if="hasCard" @click="unbundle">解绑卡片</view>
				<view v-else style="width: 68px;"></view>
			</view>
			<scroll-view :scroll-y="true" class="paymentContent">
				<view class="orderInfo" v-show="!isOver">
					<image :src="'/static/images/payment.png'" class="paymentIcon"></image>
					<text class="orderNum">应付金额：{{(amount/100).toFixed(2)}}</text>
					<view class="time" v-if="remainPayTime > 0">
						<view class="timeText">支付时间</view>
						<uni-countdown :show-day="false" @timeup="timeup" :font-size="14" :showHour="false" :second="remainPayTime" color="#ffffff" splitorColor="#ffffff"></uni-countdown>
					</view>
				</view>
				<view class="tips" v-show="!isOver">
					<image :src="'/static/images/tips.png'" class="tipsIcon"></image>
					<text class="tipsText">{{hasCard?'已绑卡，获取验证码即可完成支付':'您还没有添加快捷支付信息,请完成绑卡后支付。'}}</text>
				</view>
				<view class="paymentType" v-show="!hasCard">
					<view class="typeList">
						<view class="typeItem" :class="{active: cardType === '借记卡'}" @click="cardType = '借记卡';">
							储蓄卡
						</view>
						<view class="typeItem" :class="{active: cardType === '信用卡'}" @click="cardType = '信用卡';">
							信用卡
						</view>
					</view>
				</view>
				<view class="formContent" :class="{readonly: hasCard}" v-show="!isOver">
					<view class="formItem">
						<view class="itemLabel">卡&nbsp;&nbsp;&nbsp;号：</view>
						<view class="itemInput">
							<wInput v-model="cardNo" placeholder="请输入卡号"></wInput>
						</view>
					</view>
					<view class="formItem" v-show="cardType === '信用卡'">
						<view class="itemLabel">有效日期：</view>
						<view class="itemInput">
							<wInput v-model="expired" placeholder="请输入卡片有效日期"></wInput>
						</view>
					</view>
					<view class="formItem" v-show="cardType === '信用卡'">
						<view class="itemLabel">CVN码：</view>
						<view class="itemInput">
							<wInput v-model="cvn" placeholder="请输入卡片CVN码"></wInput>
						</view>
					</view>
					<view class="formItem">
						<view class="itemLabel">姓&nbsp;&nbsp;&nbsp;名：</view>
						<view class="itemInput">
							<wInput v-model="userName" placeholder="请输入持卡人姓名"></wInput>
						</view>
					</view>
					<view class="formItem">
						<view class="itemLabel">证件号：</view>
						<view class="itemInput">
							<wInput v-model="idCard" placeholder="请输入持卡人身份证号"></wInput>
						</view>
					</view>
					<view class="formItem">
						<view class="itemLabel">手机号：</view>
						<view class="itemInput">
							<wInput v-model="phoneNum" placeholder="请输入持卡人手机号"></wInput>
						</view>
					</view>
					<view class="formItem code">
						<view class="itemLabel">验证码：</view>
						<view class="itemInput">
							<wInput v-model="smsCode" type="number" maxlength="6" :placeholder="__('请输入验证码')" isShowCode :codeText="__('获取验证码')" ref="runCode" @setCode="getSmsCode()"></wInput>
						</view>
					</view>
					<view class="formBtn">
						<view class="btn" :class="{disabled: queryStatus}" v-if="hasCard" @click="payConfirm">{{queryStatus?'已提交，等待确认支付结果':'立即支付'}}</view>
						<view class="btn" v-else @click="bindCard">确定绑卡</view>
					</view>
				</view>
				<view class="successful" v-show="isOver">
					<view class="text">{{overText}}</view>
					<view class="btn" v-show="source === 'self'" @click="back">返回商家</view>
					<view class="text2" v-show="source !== 'self'">请手动关闭此页面</view>
				</view>
			</scroll-view>
			<uni-popup ref="popup" type="center" :mask-click="false">
				<view class="popupContent">
					<view class="popupContentText">
						{{popupContent}}
					</view>
					<view class="singleBtn">
						<view class="btnItem confirm" @click="close">
							确定
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup2" type="center" :mask-click="false">
				<view class="popupContent">
					<view class="popupContentText">
						确定解绑当前卡片？
					</view>
					<view class="popupBtnList">
						<view class="btnItem" @click="close2">
							取消
						</view>
						<view class="btnItem confirm" @click="unBindCard">
							确定
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup3" type="center" :mask-click="false">
				<view class="popupContent">
					<view class="popupContentText">
						支付中
					</view>
					<view class="loading">
						<image src="../../static/images/loading.png" class="image"></image>
					</view>
					<view class="bottomText">请勿退出此页面</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import wInput from './watch-login/watch-input.vue' //input
	import debounce from "@/utils/debounce.js";
	import wButton from './watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				cvn: '',
				expired: '',
				idCard: '',
				userName: '',
				cardNo: '',
				phoneNum: '',
				smsCode: '',
				userIntl: '',
				isSend: true,
				hasCard: false,
				popupContent: '',
				cardType: '借记卡',
				isOver: false,
				overText: '',
				payKey: '',
				amount: 0,
				queryStatus: false,
				sendTime: 120,
				remainPayTime: 0,
				source: ''
			}
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		components: {
			wInput,
			wButton
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.payKey = options.key
			this.source = options.source
			this.getOrderInfo()
			this.getBindCard()
		},
		methods: {
			backHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			open(type){
				this.$refs.popup.open(type || '')
			},
			unbundle() {
				this.$refs.popup2.open();
			},
			close() {
				this.$refs.popup.close()
			},
			close2() {
				this.$refs.popup2.close()
			},
			back() {
				if(window.history.length > 1) {
					window.history.go(-1) 
				}else{
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			getSmsCode: function() {
				let that = this;
				let url = this.Config.URL.pay.paypre;
				var params = {};
				
				console.log(this.hasCard)
				if(this.hasCard) {
					params.payKey = that.payKey
				}else if(!this.hasCard && this.cardType === '借记卡') {
					url = this.Config.URL.pay.sendCode;
					params.payKey= that.payKey
					params.cardType= that.cardType
					params.userName= that.userName
					params.phoneNum= that.phoneNum
					params.idCard= that.idCard
					params.cardNo= that.cardNo
					if(that.userName === '' || that.phoneNum === '' || that.idCard ==='' || that.cardNo === '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请先填写完整卡片信息'
						});
						return
					}
				}else if(!this.hasCard && this.cardType === '信用卡') {
					url = this.Config.URL.pay.sendCode;
					params.payKey= that.payKey
					params.cardType= that.cardType
					params.userName= that.userName
					params.phoneNum= that.phoneNum
					params.idCard= that.idCard
					params.cardNo= that.cardNo
					params.expired= that.expired
					params.cvn= that.cvn
					if(that.userName === '' || that.phoneNum === '' || that.idCard ==='' || that.cardNo === ''|| that.expired === ''|| that.cvn === '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '请先填写完整卡片信息'
						});
						return
					}
				}

				//获取验证码
				if (this.isSend) {
					this.setData({
						isSend: false
					});
					var t = this.sendTime;
					
					that.$.request({
						url: url,
						data: params,
						method: that.hasCard ?"get":"post",
						header: {
						  'type': 'application/json'
						},
						success: function(data, status, msg, code) {
							if (status == 200) {
								that.$.alert('发送成功');
								that.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
								setTimeout(function() {
									that.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
								}, 60000)
								var r = setInterval(function() {
									t > 0 ? that.setData({
										btntext: t-- + "s"
									}) : (that.setData({
										isSend: true,
										sendTime: 120,
										btntext: that.__("重新发送")
									}), clearInterval(r))
								}, 1e3);
							} else {
								that.setData({
									isSend: true
								});
								that.$.alert(msg)
			
								that.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
							}
						}
					});
				}
			},
			getOrderInfo() {
				let that = this;
				that.$.request({
					url: this.Config.URL.pay.getOrderInfo,
					data: {
						payKey: that.payKey
					},
					method: "get",
					success: function(data, status, msg, code) {
						if(code === 0) {
							that.amount = data.amount
							that.remainPayTime = data.remainPayTime * 1
							if(that.remainPayTime === 0){
								that.timeup()
							}
						}
					}
				});
			},
			getBindCard() {
				let that = this;
				that.$.request({
					url: this.Config.URL.pay.getBindCard,
					data: {
						payKey: that.payKey
					},
					method: "get",
					success: function(data, status, msg, code) {
						if(code === 0) {
							that.hasCard = data.hasCard
							if(that.hasCard){
								that.cardType = data.bankCardType
								that.userName= data.userName
								that.phoneNum= data.phoneNum
								that.idCard= data.idCard
								that.cardNo= data.bankCardNo
								that.expired= data.expired || ''
								that.cvn= data.cvn || ''
								that.smsCode = ''
								that.isSend = true
							}
						}
					}
				});
			},
			bindCard: debounce( function () {
				let that = this;
				if(that.smsCode === '') {
					that.$.alert('请先输入验证码')
					return
				}
				that.$.request({
					url: this.Config.URL.pay.bindCard,
					data: {
						payKey: that.payKey,
						smsCode: that.smsCode
					},
					header: {
					  'type': 'application/json'
					},
					method: "post",
					success: function(data, status, msg, code) {
						if(code === 0) {
							that.popupContent = '绑定成功'
							that.$refs.popup.open();
							that.$refs.runCode.$emit('runCode', 0);
							that.hasCard = true;
							that.smsCode = '';
							that.isSend = true;
						}else{
							that.$.alert(msg)
						}
					}
				});
			}, 500),
			payConfirm: debounce( function () {
				let that = this;
				if(that.smsCode === '') {
					that.$.alert('请先输入验证码')
					return
				}
				that.$.request({
					url: this.Config.URL.pay.payConfirm,
					data: {
						payKey: that.payKey,
						smsCode: that.smsCode
					},
					method: "post",
					header: {
					  'type': 'application/json'
					},
					success: function(data, status, msg, code) {
						if(code === 0 && status === 200) {
							that.$refs.popup3.open();
							that.queryStatus = true;
							that.timer = setInterval(that.getPayStatus, 1000)
						}else{
							that.$.alert(msg)
						}
					}
				});
			}, 500),
			timeup() {
				this.overText = '订单已超时'
				this.isOver = true;
			},
			getPayStatus() {
				let that = this;
				that.$.request({
					url: this.Config.URL.pay.getPayStatus,
					loading: false,
					data: {
						payKey: that.payKey
					},
					method: "get",
					success: function(data, status, msg, code) {
						if(code === 0 && data.payStatus === 'SUCCESS') {
							that.isOver = true;
							that.overText = '支付成功'
							that.$refs.popup3.close();
							clearInterval(that.timer)
						}else if(code === 0 && data.payStatus === 'FAIL') {
							that.isOver = true;
							that.overText = '支付失败'
							that.$refs.popup3.close();
							clearInterval(that.timer)
						}
					}
				});
			},
			unBindCard: debounce( function () {
				let that = this;
				that.$.request({
					url: this.Config.URL.pay.unBindCard,
					data: {
						payKey: that.payKey
					},
					method: "get",
					success: function(data, status, msg, code) {
						if(code === 0) {
							that.hasCard = false
							that.close2()
							that.userName= ''
							that.phoneNum= ''
							that.idCard= ''
							that.cardNo= ''
							that.expired= ''
							that.cvn= ''
							that.smsCode = ''
							that.isSend = true
							that.cardType = '借记卡'
							that.popupContent = '解绑成功'
							that.$refs.popup.open();
						}else{
							that.$.alert(msg)
						}
					}
				});
			}, 500),
		}
	}
</script>
<style lang="scss" scoped>
.content{
	display: flex;
	justify-content: center;
	.mainContent{
		height: 100vh;
		background-color: #fff;
		max-width: 750rpx;
	}
	.header{
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.back{
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
			line-height: 46rpx;
			padding: 0 36rpx;
		}
		.logo{
			display: flex;
			align-items: center;
			.logoImg{
				width: 64rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			.logoText{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				line-height: 46rpx;
			}
		}
		.unbundle{
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 40rpx;
			padding: 0 20rpx;
		}
	}
	.paymentContent{
		height: calc(100% - 88rpx);
		background-color: #fff;
		.orderInfo{
			height: 88rpx;
			background: #0958C4;
			display: flex;
			align-items: center;
			padding: 0 42rpx;
			position: relative;
			.paymentIcon{
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
			.orderNum{
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			.time{
				position: absolute;
				height: 100%;
				right: 10rpx;
				top: 0;
				display: flex;
				align-items: center;
				color: #fff;
				.timeText{
					font-size: 28rpx;
					line-height: 36rpx;
					margin-right: 8rpx;
				}
			}
		}
		.tips{
			height: 50rpx;
			background: #D1E4FF;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			.tipsIcon{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
			.tipsText{
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 40rpx;
			}
		}
		.paymentType{
			padding: 26rpx 34rpx 0;
			.typeList{
				border-radius: 10rpx;
				border: 2rpx solid #0958C4;
				display: flex;
				overflow: hidden;
				.typeItem{
					width: 50%;
					text-align: center;
					line-height: 60rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #0958C4;
					&.active{
						background-color: #D1E4FF;
					}
					&:first-child{
						border-right: 2rpx solid #0958C4;
						box-sizing: border-box;
					}
				}
			}
		}
		.formContent{
			padding: 12rpx 34rpx;
			.formItem{
				display: flex;
				align-items: center;
				height: 100rpx;
				border-bottom: 2rpx solid #DBDBDB;;
				.itemLabel{
					width: 140rpx;
				}
				.itemInput{
					width: calc(100% - 140rpx);
				}
			}
			.formBtn{
				margin-top: 70rpx;
				.btn{
					height: 90rpx;
					background: #0958C4;
					border-radius: 8rpx;
					line-height: 90rpx;
					text-align: center;
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			&.readonly{
				.formItem .itemInput{
					position: relative;
					&::after{
						content: '';
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
				}
				.formItem.code .itemInput{
					position: relative;
					&::after{
						content: '';
						width: 0;
						height: 0;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
					}
				}
			}
		}
		.successful{
			padding-top: 226rpx;
			.text{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				line-height: 52rpx;
				text-align: center;
			}
			.text2{
				font-weight: 500;
				color: #bcbcbc;
				font-size: 32rpx;
				margin-top: 40rpx;
				text-align: center;
			}
			.btn{
				width: 390rpx;
				height: 104rpx;
				background: #0958C4;
				border-radius: 24rpx;
				line-height: 104rpx;
				text-align: center;
				margin: 50rpx auto;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
				&.disabled{
					background: #B3B3B3;
				}
			}
		}
	}
	.popupContent{
		width: 444rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.loading{
		display: flex;
		align-items: center;
		justify-content: center;
		.image{
			width: 116rpx;
			height: 116rpx;
			animation: spin 2s linear infinite;
		}
	}
	.bottomText{
		font-weight: 600;
		text-align: center;
		font-size: 26rpx;
		color: #000000;
		line-height: 38rpx;
		padding: 40rpx;
	}
	.popupContentText{
		padding: 48rpx 20rpx 34rpx;
		font-weight: 600;
		text-align: center;
		font-size: 28rpx;
		color: #000000;
	}
	.popupBtnList{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx 40rpx;
		.btnItem{
			width: 162rpx;
			height: 60rpx;
			background: #D3D3D3;
			border-radius: 8rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: #3D3D3D;
		}
		.confirm{
			background: #0958C4;
			color: #FFFFFF;
		}
	}
	.singleBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 40rpx;
		.confirm{
			width: 162rpx;
			height: 60rpx;
			background: #0958C4;
			border-radius: 8rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
}
@keyframes spin {
    from {
        transform: rotate(0deg); /* 开始时旋转0度 */
    }
    to {
        transform: rotate(360deg); /* 结束时旋转360度 */
    }
}
</style>